/*
    vermijd flickering van elementen: elementen zijn miliseconden zichtbaar
    voor ze verborgen worden door jQuery.
*/
document.write('<style type="text/css">body{display:none}</style>');
(function($) {
    $(document).ready(function() {
        $('body').animate({opacity: 1.0}, 1000, function() {
            // alles wordt weer zichtbaar
            $(this).css('display', 'block');

            // wat geanimeerd moet worden, verbergen
            hideAnimate();

            // links en rechts onder balk plaatsen
            placeSidesUnderSidebar();

            // logo laten verschijnen
            animateFadeInElements();

            // categories tonen
            animateCategories(function() {
                setupCategoriesHoverHandler();
                setupCategoriesClickHandler();
                setupLogoClickHandler();
            });
        });
    });
})(jQuery);

function hideAnimate() {
    (function($) {
        $('.animate').add('.animatecontent *').hide();
    })(jQuery);
}

function placeSidesUnderSidebar() {
    (function($) {
        $('#left, #right').addClass('closed');
    })(jQuery);
}

function animateFadeInElements() {
    (function($) {
        $('.fadein, .fadein *').fadeIn(400);
    })(jQuery);
}

function animateCategories(callback) {
    (function($) {
        $('.cat-item:even').animate({opacity: 1.0}, 500).show('slide', {direction: 'left', easing: 'easeOutBack'}, 1000);
        $('.cat-item:odd').animate({opacity: 1.0}, 500).show('slide', {direction: 'right', easing: 'easeOutBack'}, 1000, function() {
            $('.cat-item a').addClass('hover').css({opacity: 0.0}).show();
            callback();
        });
    })(jQuery);
}
